<template>
  <view class="shop-home">
    <view class="home-header">
      <view class="shop-header-nav">
        <view class="text-width">
          <view class="text2">社区团购</view>
        </view>
        <view class="search-center" @click="searchTo">
          <view class="nav-search">
            <view class="search-container">
              <uni-icons type="search" size="19" color="#808080"></uni-icons>
              <view class="text"> 搜索 </view>
            </view>
          </view>
        </view>
      </view>
      <view class="shop-title-padding">
        <view class="shop-title">
          <view class="scroll" @change="test">
            <view
              class="sort-item"
              v-for="(item, index) in sortItem"
              :key="index"
              @click="sortClick(item, index)"
              v-bind:class="{ redBorder: isShow == index }"
            >
              <view>{{ item }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <div class="sort-item-content">
      <div
        class="content-item"
        v-for="(goods, index) in showData"
        :key="index"
        @click="showBookDetail(goods)"
      >
        <div class="img-wrapper">
          <img class="img" :src="goods.item_img[0]" />
        </div>
        <div class="content-wrapper">
          <div class="title">{{ goods.title }}</div>
          <div class="cart-bottom">
            <div class="cart-money">
              <div class="money">
                <text class="iconfont icon-jiage"></text>{{ goods.price }}
              </div>
              <div class="cart">
                <button @click.stop="cartTo(goods)" plain="true">
                  加入购物车
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-foot">
      <div class="foot-ding" @click="myOrderTo">
        <div>
          <div><text class="iconfont icon-dingdan icon"></text></div>
          <div>订单</div>
        </div>
      </div>
      <div class="foot-cart" @click="myCartTo">
        <div class="foot-cart-wrapper">
          <div class="icon-brage" v-show="cartNums > 0">
            <div>{{ cartNums }}</div>
          </div>
          <div><uni-icons type="cart" size="18"></uni-icons></div>
          <div>购物车</div>
        </div>
      </div>
      <div class="foot-pay" @click="myCartTo">
        <!-- <div><text class="iconfont icon-jiage"></text>3.99</div> -->
        <div>去支付</div>
      </div>
    </div>
  
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShow: 0,
      sortItem: [
        "每日上新",
        "时令蔬菜",
        "新鲜水果",
        "乳品饮料",
        "速食冻品",
        "粮油调味",
        "肉蛋水产",
        "休闲零食",
        "居家百货",
      ],
      showData: [
       
      ],
      openid: "",
      cartNums: 0,
    };
  },

  onShow() {
    this.requestData();
    let that = this;
    uni.getStorage({
      key: "openid",
      success: function (res) {
        console.log(res);
        that.openid = res.data;
        that.cartNum();
      },
    });
  },
  methods: {
    // scroll: function (e) {
    //   console.log(e);
    //   // this.old.scrollTop = e.detail.scrollTop;
    // },
    requestData() {
      this.$MyRequest({
        url: "/cart",
      }).then((res) => {
        // console.log(res.data);

        this.showData = res.data.data.map((s) => {
          s.item_img = JSON.parse(s.item_img);
          return s;
        });

        this.showData = this.showData.sort((a, b) => {
          return a.time < b.time ? 1 : -1;
        });
        // console.log(data);
        // this.questionFrom = JSON.parse(optionData);
        // console.log(optionData);
      });
    },
    //购物车数量
    cartNum() {
      this.$MyRequest({
        url: "/cart_my_num",
        method: "POST",
        data: {
          openid: this.openid,
        },
      }).then((res) => {
        this.cartNums = res.data.data;
      });
    },
    back() {
      uni.navigateBack({ delta: 1 });
      console.log("1");
    },
    searchTo() {
      uni.navigateTo({ url: "/pages/home/service/GroupBuying/SearchPage" });
    },
    sortClick(item, index) {
      this.isShow = index;
      if (item == this.sortItem[0]) {
        this.requestData();
      } else {
        // this.showData = this.showData.filter((s) => {
        //   return s.sort == item;
        // });
        uni.showLoading({
           title: "加载中",
        });

        this.$MyRequest({
          url: "/cart-sort",
          data: {
            sort: item,
          },
        }).then((res) => {
          console.log(res.data);
          this.showData = [];
          uni.hideLoading();

          this.showData = res.data.data.map((s) => {
            s.item_img = JSON.parse(s.item_img);
            return s;
          });

          this.showData = this.showData.sort((a, b) => {
            return a.time < b.time ? 1 : -1;
          });
        });
        console.log(this.showData);
      }

      // switch (item) {
      //   case this.sortItem[0]:
      //     break;
      //   case this.sortItem[1]:
      //     console.log(item);
      //     this.showData = this.showData.filter((s) => {
      //       s.sort == item;
      //       return s;
      //     });
      //     console.log(this.showData);
      //     break;
      //   case this.sortItem[2]:
      //     console.log(item);
      //     break;

      //   default:
      //     break;
      // }
    },
    showBookDetail(item) {
      // console.log("56556");
      // console.log(item.author);
      uni.navigateTo({
        url: "/pages/home/service/GroupBuying/GoodsDetail?s_id=" + item.s_id,
      });
    },
    test(e) {
      console.log(e);
    },
    //加入购物车
    cartTo(item) {
      console.log(item);
      this.$MyRequest({
        url: "/set_cart_one",
        method: "POST",
        data: {
          sId: item.s_id,
          openid: this.openid,
          img: item.item_img[0],
        },
      }).then((res) => {
        console.log(res.data);
        uni.showToast({
          title: "添加成功",
          duration: 1000,
        });
        this.cartNum();
      });

      // uni.showLoading({
      //   title: "加载中",
      // });
    },
    myOrderTo() {
      uni.navigateTo({ url: "/pages/home/service/GroupBuying/MyOrder" });
    },
    myCartTo() {
      uni.navigateTo({ url: "/pages/home/service/GroupBuying/MyCart" });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.shop-home {
  // padding-top: 20px;
  .sort-item-content {
    padding: 0 15rpx;
    margin-top: 180rpx;
    margin-bottom: 90rpx;
    // height: 100%;
    width: 100%;
    // padding-right: 50rpx;
    box-sizing: border-box;
    // margin-bottom: 30rpx;
    .content-item {
      display: flex;
      margin-bottom: 30rpx;
      // border-bottom: 1rpx solid rgb(179, 177, 177);
      // padding-bottom: 10px;
      .img-wrapper {
        // padding: 20rpx 20rpx 20rpx 0;
        box-sizing: border-box;
        flex: 0 0 40%;
        // width: 250rpx;
        // height: 270rpx;
        .img {
          width: 100%;
          height: 270rpx;
        }
      }
      .content-wrapper {
        width: 100%;
        height: 290rpx;
        padding: 5rpx 0;
        padding-left: 18rpx;
        box-sizing: border-box;
        position: relative;
        border-bottom: 1rpx solid rgba(223, 222, 222, 0.746);
        padding-bottom: 10px;
        // padding-right: 15rpx;
        // right: 15rpx;
        .title {
          font-size: 30rpx;
          letter-spacing: 1px;
          color: black;
        }
        .author {
          margin-top: 20rpx;
        }
        .cart-bottom {
          position: absolute;
          bottom: 20px;
          z-index: 800;
          .cart-money {
            display: flex;
            width: 100%;
            justify-content: space-between;
            box-sizing: border-box;
            // position: relative;
            .money {
              color: $uni-color-cart;
              font-size: 35rpx;
              font-weight: bold;
              // @include center;
            }
            .cart {
              // padding-left: 50rpx;
              position: absolute;
              left: 210rpx;
              bottom: 0;
              box-sizing: border-box;
              button {
                border-radius: 30rpx;
                font-size: 27rpx;
                color: #eee;
                width: 200rpx;
                letter-spacing: 1px;
                // size: 10;
                height: 55rpx;
                @include center;
                background-color: $uni-color-cart;
                border: none;
              }
            }
          }
        }
      }
    }
  }
  .home-header {
    // background-color: rgb(231, 39, 39);
    width: 100%;
    // height: 70px;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;

    .shop-header-nav {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      // margin-top: 20px;
      height: 45px;
      background-color: rgb(231, 39, 39);
      font-size: 17px;
      .text-width {
        // @include center;
        padding-left: 20rpx;
        height: 100%;
        display: flex;
        align-items: center;
        // width: 20vh;
      }
      .search-center {
        flex: 1;
        @include center;
        margin-right: 30px;
        margin-left: 15px;
      }
      .nav-search {
        padding: 7px;
        border-radius: 10px;
        background-color: rgb(248, 248, 248);
        width: 100%;
        border: 0.5rpx solid #c8c7cc;
        // @include center;
        .search-container {
          height: 25rpx;
          @include center;
          font-size: 28rpx;
          color: #808080;
          .text {
            padding-left: 28rpx;
          }
        }
      }
    }
    .shop-title-padding {
      // padding-right: 30rpx;
      .shop-title {
        // margin-top: 15px;
        // padding-right: 30rpx;
        background-color: #fff;
        border-bottom: 1rpx solid rgb(230, 227, 227);
        .scroll {
          font-size: 36rpx;
          // padding-right: 30rpx;
          height: 70rpx;
          white-space: nowrap;
          overflow-x: scroll;
          // overflow-x: hidden;

          display: flex;
          box-sizing: border-box;
          // border-bottom: 1rpx solid rgb(209, 209, 209);

          .sort-item {
            width: 300rpx;
            padding: 0 15rpx;
            padding-bottom: 5rpx;
            box-sizing: border-box;
            // border-bottom: 5rpx solid rgb(216, 16, 16);
            @include center;
          }
          .redBorder {
            width: 300rpx;
            padding: 0 15rpx;
            box-sizing: border-box;
            color: rgb(231, 59, 59);
            border-bottom: 5rpx solid rgb(245, 2, 2);
            @include center;
          }
        }
      }
    }

    .item {
      margin-top: 110px;
      height: 100%;
    }
  }
  .home-foot {
    width: 100%;
    // height: 70px;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    display: flex;
    // align-items: center;
    height: 90rpx;
    background-color: #fff;
    border-top: 1px solid rgb(233, 231, 231);
    .foot-ding {
      @include center;
      text-align: center;
      // vertical-align: middle;
      flex: 0 0 120rpx;
      background-color: #fff;
      font-size: 27rpx;
    }
    .foot-cart {
      @include center;
      font-size: 27rpx;
      text-align: center;
      flex: 0 0 120rpx;
      background-color: #fff;
      .foot-cart-wrapper {
        position: relative;
        .icon-brage {
          position: absolute;
          border-radius: 50%;
          width: 35rpx;
          height: 35rpx;
          background-color: $uni-color-cart;
          top: -7rpx;
          left: 50rpx;
          @include center;
          color: #fff;
          font-size: 20rpx;
          font-weight: bold;
        }
      }
    }

    .foot-pay {
      text-align: center;
      font-size: 35rpx;
      @include center;
      flex: 1;
      background-color: $uni-color-cart;
      color: #fff;
    }
    .icon {
      font-size: 37rpx;
    }
  }

  ::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
}
</style>
